<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>云图网-注册</title>
    <!-- Bootstrap -->
    <link rel="icon" href="static/index/registe/imgs/yun.ico" type="image/x-icon"/>
    <link href="static/index/registe/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/index/registe/css/login.css" rel="stylesheet">
    <link href="static/index/registe/css/toastr.min.css" rel="stylesheet">
    <script src="static/index/registe/js/jquery-1.8.3.min.js"></script>
    <script src="static/index/registe/js/toastr.min.js"></script>
    <!--[if lt IE 9]>
    <script src="./js/html5shiv.min.js"></script>
    <script src="./js/respond.min.js"></script>
    <![endif]-->
</head>
<body >
    <header class="header">
        <div class="row">
            <div class="col-md-12 col-xs-12  col-xs-12">
                <div class="col-md-push-1 col-md-3 col-xs-3 ">
                    <div class="col-md-4 col-xs-4">
                        <a href="{:url('index/index/index')}" >
                            <img src="static/index/registe/imgs/logo.png"  class="img-responsive m10">
                        </a>
                            
                    </div>
                    <div class="col-md-3 col-xs-3 m4 ml-20">
                        <p class="h4">{:$title}</p>
                    </div>
                </div>

                <div class="col-md-2 m10  col-xs-2 col-md-push-7" >
                    <div class="col-md-2 col-xs-2">
                    <a href="{:url('index/login/index')}"  class="btn btn-success">登录</a>
                    </div>
                    <div class="col-md-2  col-xs-2 col-md-push-2">
                    <a href="{:url('index/registe/index')}"  class="btn btn-default">注册</a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- /header -->
    <div style="width: 100%;background-color:#10C55C;">
        <div class="container" >
            <div class="row" >
                <div class="col-md-12 col-xs-12"  >
                    <img src="static/index/registe/imgs/bg.png">
                    <div class="col-md-4 col-xs-4 col-md-pull-9 login-main" style='border-radius: 10%;'>


                        <div class="col-md-12 col-xs-12"  style='width: 400px; height: 62px; line-height: 62px'>
                            <div class="col-md-2" ></div>
                            <div class="col-md-3 col-xs-3 " style='text-align:center'><a href="{:url('index/login/index')}" style="font-size: 20px">登录</a></div>
                            <div class="col-md-2 col-xs-2" ></div>
                            <div class="col-md-3 col-xs-3 " style='text-align:center;border-bottom:3px solid #10C55B; width:74px; height:60px'><a href="{:url('index/registe/index')}" style="font-size:20px; color:#10C55B">注册</a></div>
                        </div>
                            <!-- 图标登录页面 -->
                            <div id='icon_login' style='display:block'>
                                <div class=" col-md-4 col-xs-4 m20">
                                        <img  class="img-responsive" src="static/index/registe/imgs/qq.png" style='width:84px; height:85px' id='qq'>
                                        <center class="m20"><p style='font-size:16px'>QQ注册</p></center>
                                </div>
                                <div class="col-md-4 col-xs-4 m20">
                                        <img  class="img-responsive" src="static/index/registe/imgs/wx.png" style='width:84px; height:85px' id='wx'>
                                        <center class="m20"><p style='font-size:16px'>微信注册</p></center>
                                </div>
                                <div class="col-md-4 col-xs-4 m20">
                                        <img  class="img-responsive" src="static/index/registe/imgs/wb.png" style='width:84px; height:85px' id='wb'>
                                        <center class="m20"><p style='font-size:16px'>微博注册</p></center>
                                </div>

                                <div class="col-md-12 col-xs-12  m20">
                                    <div class="col-md-3 col-xs-3"> </div>
                                    <div class="col-md-5 " style='height:18px;'>
                                        <center><a onclick='emailLogin()'><p style="font-size: 15px;color:#10C55B;">邮箱验证注册</p></a></center>
                                    </div>
                                </div>

                                <div class="col-md-12 col-xs-12  m20">
                                    <div class="col-md-1 "></div>
                                    <div class="col-md-5 col-md-offset-2" style='height:18px;'>
                                        <center><a onclick='tellLogin()'><p style="font-size: 15px;color:#10C55B;">手机验证码注册</p></a></center>
                                    </div>
                                </div>
                            </div>
                            <!-- 图标登录结束 -->
                            

                            <!-- 手机验证登录 -->
                        <form action="{:url('index/registe/doRegiste')}" method="post" accept-charset="utf-8">
                            <div id='tell_login'   style='display:none;'>
                                <div class="col-md-12 col-xs-12  m20">
                                    <div class="col-md-4 col-xs-4 ml-10">
                                        <img src="static/index/registe/imgs/qd.png" id='qd' style='width:110px; height:40px'>
                                    </div>
                                    <div class="col-md-4 col-xs-4 ">
                                        <img src="static/index/registe/imgs/wd.png" id='wd' style='width:110px; height:40px'>
                                    </div>
                                    <div class="col-md-4 col-xs-4 ">
                                        <img src="static/index/registe/imgs/bd.png" id='bd' style='width:110px; height:40px'>
                                    </div>
                                    <!-- <div class="col-md-1 "></div> -->
                                </div>

                                <div class="col-md-12 col-xs-12  ">
                                    <img src="static/index/registe/imgs/huo.png"  >
                                </div>

                                <div class="col-md-12 col-xs-12  ">

                                    <!-- 手机号 -->
                                    <div class="row">
                                            <div class="input-group input-group-lg">
                                              <span class="input-group-addon" id="sizing-addon1" style='background-color: #fff;'><img src="static/index/registe/imgs/zhanghao.png" style='width:20px;height:22px'></span>
                                              <input type="text" class="form-control yzmtel" name="phone" placeholder="请输入手机号" aria-describedby="sizing-addon1">
                                            </div>
                                           <div class="col-lg-1">
                                            </div>
                                            <div class="col-lg-7 ">
                                            <span class="m10 phonemsg" style="color:red"></span>
                                            </div>
                                    </div>
                                    <!-- end 手机号 -->

                                    <!-- 密码 -->
                                    <div class="row m10">
                                            <!-- 密码 -->
                                        <div class="input-group input-group-lg ">
                                            <span class="input-group-addon" id="sizing-addon1" style='background-color: #fff;'><img src="static/index/registe/imgs/mima.png" style='width:20px;height:22px'></span>
                                            <input type="password" class="form-control yzmpwd " name="pass" placeholder="请输入密码" aria-describedby="sizing-addon1">
                                        </div>
                                            <div class="col-lg-1 col-xs-1">
                                            </div>
                                            <div class="col-lg-7 col-xs-7 ">
                                            <span class="m10 passmsg" style="color:red;"></span>
                                            </div>
                                    </div>
                                    <!-- end 密码 -->
            
                                    <!-- 手机验证码 -->
                                    <div class="row m10 ml-30">
                                        <div class="col-lg-12 col-xs-12">
                                            <div class="input-group">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" id="send-btn" type="button">发送验证码</button>
                                                </span>
                                                <input type="text"  class="form-control yzm" name="telCode" placeholder="验证码" aria-describedby="sizing-addon1">
                                                <input type="hidden" name="pCode"  class="pCode">
                                            </div><!-- /input-group -->
                                        </div><!-- /.col-lg-6 -->
                                    </div>
                                    <!-- end 手机验证码 -->

                                    <div class="col-md-12 col-xs-12  m10">
                                        <button class=" sub-btn btn btn-success yzm-btn" type="submit" style='width:340px;margin-left: -15px'>注册</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <!-- 手机验证登录结束 -->


                        <!-- 邮箱验证 -->
                        <form action="{:url('index/registe/email')}" method="post" accept-charset="utf-8">
                            <div id='email_login'   style='display:none;'>
                                <div class="col-md-12 col-xs-12  m20">
                                    <div class="col-md-4 col-xs-4 ml-10">
                                        <img src="static/index/registe/imgs/qd.png" id='qd' style='width:110px; height:40px'>
                                    </div>
                                    <div class="col-md-4 col-xs-4 ">
                                        <img src="static/index/registe/imgs/wd.png" id='wd' style='width:110px; height:40px'>
                                    </div>
                                    <div class="col-md-4 col-xs-4 ">
                                        <img src="static/index/registe/imgs/bd.png" id='bd' style='width:110px; height:40px'>
                                    </div>
                                    <!-- <div class="col-md-1 "></div> -->
                                </div>

                                <div class="col-md-12 col-xs-12  ">
                                    <img src="static/index/registe/imgs/huo.png"  >
                                </div>

                                <div class="col-md-12 col-xs-12  ">

                                    <!-- 邮箱号 -->
                                    <div class="row">
                                            <div class="input-group input-group-lg">
                                              <span class="input-group-addon" id="sizing-addon1" style='background-color: #fff;'><img src="static/index/registe/imgs/zhanghao.png" style='width:20px;height:22px'></span>
                                              <input type="email" class="form-control emailnum" name="email" placeholder="请输入常用邮箱" aria-describedby="sizing-addon1">
                                            </div>
                                           <div class="col-lg-1">
                                            </div>
                                            <div class="col-lg-7 ">
                                            <span class="m10 emailmsg" style="color:red"></span>
                                            </div>
                                    </div>
                                    <!-- end 邮箱号 -->

                                    <!-- 密码 -->
                                    <div class="row m10">
                                            <!-- 密码 -->
                                        <div class="input-group input-group-lg ">
                                            <span class="input-group-addon" id="sizing-addon1" style='background-color: #fff;'><img src="static/index/registe/imgs/mima.png" style='width:20px;height:22px'></span>
                                            <input type="password" class="form-control emailpwd" name="pwd" placeholder="请输入密码" aria-describedby="sizing-addon1">
                                        </div>
                                            <div class="col-lg-1 col-xs-1">
                                            </div>
                                            <div class="col-lg-7  colx-xs-7>
                                            <span class="m10 passmsg" style="color:red;"></span>
                                            </div>
                                    </div>
                                    <!-- end 密码 -->
                                    <div class="col-md-12 col-xs-12  m10">
                                        <button class=" sub-btn btn btn-success email-btn" type="submit" style='width:340px;margin-left: -15px'>注册</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <!-- 邮箱验证结束 -->
                    <div class="col-md-12 col-xs-12  m20">
                        <div class="col-md-1"></div>
                        <div class="col-md-10 ">
                            <p><input type="checkbox" checked id="check"><font size='1' color='#666'>勾选代表你同意<a href="">《注册声明》</a><a href="">《版权声明》</a></font></p>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
                toastr.options = {
                    closeButton: true,
                    progressBar: true,
                    timeOut: '3000',
                    positionClass: "toast-top-center",
                };
            qq.onmouseover=function(){
                qq.src="static/index/registe/imgs/qqq.png"
            }
            qq.onmouseout=function(){
                qq.src="static/index/registe/imgs/qq.png"
            }

            wx.onmouseover=function(){
                wx.src="static/index/registe/imgs/wxx.png"
            }
            wx.onmouseout=function(){
                wx.src="static/index/registe/imgs/wx.png"
            }

            wb.onmouseover=function(){
                wb.src="static/index/registe/imgs/wbb.png"
            }
            wb.onmouseout=function(){
                wb.src="static/index/registe/imgs/wb.png"
            }

            qd.onmouseover=function(){
                qd.src="static/index/registe/imgs/qdd.png"
            }
            qd.onmouseout=function(){
                qd.src="static/index/registe/imgs/qd.png"
            }

            wd.onmouseover=function(){
                wd.src="static/index/registe/imgs/wdd.png"
            }
            wd.onmouseout=function(){
                wd.src="static/index/registe/imgs/wd.png"
            }

            bd.onmouseover=function(){
                bd.src="static/index/registe/imgs/bdd.png"
            }
            bd.onmouseout=function(){
                bd.src="static/index/registe/imgs/bd.png"
            }
            

            function tellLogin(){
                icon_login.style='display:none';
                tell_login.style='';
               
            }
            function emailLogin(){
                icon_login.style='display:none';
                email_login.style='';
               
            }

            function userLogin(){
                icon_login.style='display:none';
                tell_login.style='display:none';
                
            }
            $("#check").click(function(){
                toastr.warning('登录/注册必须同意协议');
                return false;
            });

            // start 
            // 失焦验证
            $(function(){
                // 验证手机号码的正确性
                $('input[name="phone"]').blur(function(){
                   var phone =  $(this).val();
                   if(!phone){
                     $('.phonemsg').html('手机号不能为空');
                     $('.sub-btn').removeAttr('disabled');
                     return false;
                   }else{
                    $('.phonemsg').html('');
                     $('.sub-btn').removeAttr('disabled');
                     $('#btn').removeAttr('disabled');

                   }
                   var reg = /(1[3-9]\d{9}$)/;
                   if(!reg.test(phone)){
                        $('.phonemsg').html('手机号格式不正确');
                        $('.sub-btn').attr('disabled','true');
                        return false;
                   }else{
                        $('.phonemsg').html('');
                        $('.sub-btn').removeAttr('disabled');
                        $('#btn').removeAttr('disabled');
                   }
                });

                  $('input[name="email"]').blur(function(){
                   var email =  $(this).val();
                   if(!email){
                     $('.emailmsg').html('邮箱不能为空');
                     $('.sub-btn').removeAttr('disabled');
                     return false;
                   }else{
                    $('.emailmsg').html('');
                     $('.sub-btn').removeAttr('disabled');
                     $('#btn').removeAttr('disabled');

                   }
                   var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                   if(!reg.test(email)){
                        $('.emailmsg').html('邮箱格式不正确');
                        $('.sub-btn').attr('disabled','true');
                        return false;
                   }else{
                        $('.emailmsg').html('');
                        $('.sub-btn').removeAttr('disabled');
                        $('#btn').removeAttr('disabled');
                   }
                });


                // 验证密码的正确性
                $('input[name="pass"]').blur(function(){
                   var phone =  $(this).val();
                   if(!phone){
                        $('.passmsg').html('密码不能为空');
                        $('.sub-btn').attr('disabled','true');
                        return false;
                   }else{
                        $('.phonemsg').html('');
                        $('.sub-btn').removeAttr('disabled');
                        $('#btn').removeAttr('disabled');
                   }
                   var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
                   if(!reg.test(phone)){
                        $('.passmsg').html('6-15位数字字母密码');
                        $('.sub-btn').attr('disabled','true');
                        return false;
                   }else{
                        $('.passmsg').html('');
                        $('.sub-btn').removeAttr('disabled');
                   }
                });

                // 发送验证码
            $('#send-btn').click(function(){
                var phone = $('input[name="phone"]').val();
                $.ajax({
                    type:'post',
                    url:'domsg',
                    data:{'phone':phone},
                    dataType:'json',
                    success:function(data){
                        if(data.status){
                            toastr.success(data.info);
                        }else{
                            toastr.error(data.info);
                        }
                    },
                    error:function(){
                        toastr.error('验证码发送失败');
                    }
                });
            });
            });
            //判断为空不能提交表单手机验证码注册
            $('.yzm-btn').click(function(){
                var tel = $('.yzmtel').val();
                var pwd = $('.yzmpwd').val();
                var yzm = $('.yzm').val();
                if(tel==null || tel==''){
                    toastr.error('请输入手机号码');
                    return false;
                }
                if(pwd==null || pwd==''){
                    toastr.error('请输入手机号码');
                    return false;
                }
                if(yzm==null || yzm==''){
                    toastr.error('请输入手机号码');
                    return false;
                }
            });
            
            //邮箱注册验证
            $('.email-btn').click(function(){
                var email = $('.emailnum').val();
                var pwd = $('.emailpwd').val();
                if(email==null || email==''){
                    toastr.error('请输入邮箱');
                    return false;
                }
                if(pwd==null ||pwd==""){
                    toastr.error('请输入密码');
                    return false;
                }
            });
        </script>
</body>
</html> 